<script setup>
import {
  listCorporation,
  getCorporation,
  delCorporation,
  addCorporation,
  updateCorporation,
} from '@/api/system/corporation'
import { reactive } from 'vue'

const { proxy } = getCurrentInstance()

const { visitorRecord_state } = proxy.useDict('visitorRecord_state')

const formRef = ref(null)
// visitorRecord_state
// 列表数据
const tableData = ref([])

const formValue = ref({})

const selectForm = ref([
  { type: '日期范围' },
  { label: '预约人', type: '输入框', model: 'reservationName' },
  { label: '状态', type: '下拉单选', model: 'state', opt: visitorRecord_state },
])

// 按钮枚举
const buttonList = ref([{ label: '新增', type: 'add' }])

// 列表枚举
const column = ref([
  { label: '文字内容', prop: 'content' },
  { label: '图片', prop: 'imgUrl' },
  { label: '创建时间', prop: 'createTime' },
  { label: '创建人', prop: 'createBy' },
  { label: '操作', prop: 'x', width: '240' },
])

// state
const state = reactive({
  title: '新增',
  total: 0, // 列表总数
  loading: false,
  btnLoading: false,
})

// 表单校验
const rules = reactive({
  content: [{ required: true, message: '公司介绍不能为空', trigger: 'blur' }],
  imgUrl: [{ required: true, message: '请填写图片', trigger: 'blur' }],
  instructions: [
    { required: true, message: '请填写预约须知', trigger: 'blur' },
  ],
})

// 新增
const add = async () => {
  state.title = '新增'
  state.isShow = true
}

// 修改
const edit = async (id) => {
  try {
    const { data: result } = await getCorporation(id)
    formValue.value = result
    state.title = '修改'
    state.isShow = true
  } catch {
  } finally {
  }
}

// 删除
const remove = async (ids) => {
  const is = await proxy.DelMessageBox('是否确认删除该轮播图？')
  if (!is) return
  await delCorporation(ids)
  getList()
  proxy.successMsg('删除成功!')
}

// 查看
const getData = async (id) => {
  try {
    const { data: result } = await getCorporation(id)
    formValue.value = result
    // state.title = '查看'
    // state.disabled = true
    // state.isShow = true
  } catch {
  } finally {
  }
}
getData()

// 新增提交
const addSub = async () => {
  const validate = await formRef.value.validate()
  if (!validate) return
  try {
    state.btnLoading = true
    await addCorporation(formValue.value)
    close()
    getList()
    proxy.successMsg('新增成功!')
  } catch {
  } finally {
    state.btnLoading = false
  }
}

// 修改提交
const editSub = async () => {
  const validate = await formRef.value.validate()
  if (!validate) return
  try {
    state.btnLoading = true
    proxy.$modal.loading('修改中,请稍后')
    await updateCorporation(formValue.value)

    proxy.successMsg('修改成功!')
  } catch {
  } finally {
    state.btnLoading = false
    proxy.$modal.closeLoading()
  }
}

// 关闭
const close = () => {
  formValue.value = {}
  state.isShow = false
  state.disabled = false
}

// 查询条件
const query = reactive({
  pageNum: 1,
  pageSize: 10,
})

// 查询提交
const selectSubmit = (obj) => {
  Object.keys(obj).forEach((t) => (query[t] = obj[t]))
  getList()
}

// // 查询轮播图列表
// const getList = async () => {
//   state.loading = true
//   try {
//     const result = await listCorporation(query)
//     tableData.value = result.rows
//     state.total = result.total
//   } catch {
//   } finally {
//     state.loading = false
//   }
// }
// getList()
</script>

<template>
  <div class="app-container">
    <!-- <x-select-form :selectForm="selectForm" @selectSubmit="selectSubmit" /> -->
    <!-- <x-button :list="buttonList" @add="add" /> -->
    <el-form ref="formRef" :model="formValue" :rules="rules" label-width="80px">
      <el-form-item label="图片" prop="imgUrl">
        <ImageUpload
          v-if="!state.disabled"
          fileSize="10"
          limit="1"
          v-model="formValue.imgUrl"
        />
        <ImagePreview v-else :src="formValue.imgUrl" />
      </el-form-item>

      <div class="rk">
        <el-form-item label="预约须知" prop="instructions">
          <x-editor
            :rows="8"
            type="textarea"
            v-if="!state.disabled"
            v-model="formValue.instructions"
            placeholder="请输入预约须知"
          />
        </el-form-item>
      </div>
      <el-form-item label="公司介绍" prop="content">
        <x-editor
          v-if="!state.disabled"
          v-model="formValue.content"
          placeholder="请输入公司介绍"
        />
      </el-form-item>
    </el-form>
    <el-button style="width: 100%" @click="editSub">提交</el-button>
    <!-- 添加或修改轮播图对话框 -->
    <x-dialog
      width="55rem"
      :loading="state.btnLoading"
      :title="state.title"
      v-model="state.isShow"
      @ok="state.title == '新增' ? addSub() : editSub()"
      @close="close"
    >
    </x-dialog>
  </div>
</template>

<style lang="scss" scoped>
.rk ::v-deep .el-form-item {
  width: 100% !important;
}
</style>
